<template>
    <div class="detail_page">
        <my-header></my-header>
        <div class="book_detail">
            <font class="book_name">{{book.bookName}}</font>
            <div class="book_cover_content">
                <img class="book_cover" src="../../assets/bookType1.png">
                <div class="book_content">
                    <font class="book_info">作者：{{book.bookAuthor}}</font>
                    <font class="book_info">出版社：上海音乐出版社</font>
                    <font class="book_info">分类: 艺术</font>
                    <font class="book_info">版次: 1</font>
                    <font class="book_info">ISBN: 12315615616</font>
                </div>
            </div>
            <div class="book_price">价格：<div class="price">￥2666</div><div class="book_count">库存：300本</div></div>
            <font class="info_title">内容简介：</font>
            <div class="book_brief_introduction">这是辛丰年先生丰年先生丰年先生丰年先生丰年先生丰年先生丰年先生丰年先生丰年先生的丰年先生丰年先生首本音乐随笔著这是辛丰年先生的首本音乐随笔著这是辛丰年先生的首本音乐随笔著作，一九八七年一月由北京生活,读书,新知三联书店出版，此书出版之后成为一代中国古典乐迷的启蒙读物，并让“辛丰年”这个名字在古典乐迷中家喻户晓</div>
            <div class="buy_book_box">
                <Button class="btn" icon='ios-cart-outline' @click="addToCart()" type="warning">加入购物车</Button>
                <Button class="btn" icon='ios-basket-outline' @click="buyBook()" type="error">购买</Button>
            </div>
        </div>
        <my-footer></my-footer>
    </div>
</template>

<script>
import myFooter from '../../components/footer'
import myHeader from '../../components/header'
import { userService } from '../../service/userService'

export default {
    components: { 
        myHeader,
        myFooter 
    },
    data() {
        return {
            book: {
                bookName: "雅众·辛丰年音乐文集",
                bookAuthor: '李白'
            }
        }
    },
    methods: {
        addToCart() {
            if(userService.checkUserIslogin()) {
                this.$Message.success('已将本书放入您的购物车，请记得及时付款。');
                this.$router.push('/bookList');
            } else {
                this.$Message.warning('请先登录！');
            }
        },
        buyBook() {
            if(userService.checkUserIslogin()) {
                this.$router.push('/orderBook');
            } else {
                this.$Message.warning('请先登录！');
            }
        }
    }
}
</script>

<style scoped>
.detail_page{
    width: 100%;
}
.book_detail{
    width: 750px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}
.book_name{
    font-size: 32px;
}
.book_cover_content{
    display: flex;
}
.book_cover{
    margin-top: 30px;
    width: 250px;
    height: 330px;
}
.book_content{
    width: 350px;
    height: 330px;
    padding-top: 60px;
    padding-left: 39px;
    display: flex;
    flex-direction: column;
}
.book_info{
    font-size: 23px;
    margin-bottom: 22px;
}
.book_price{
    padding-left: 28px;
    font-size: 30px;
    margin-top: 20px;
    color: gray;
    display: flex;
}
.price{
    margin-top: -12px;
    color: red;
    font-size: 45px;
}
.book_count{
    color: #000;
    margin-top: 5px;
    font-size: 25px;
    margin-left: 200px;
}
.info_title{
    font-weight: bolder;
    margin-bottom: 10px;
    font-size: 20px;
    padding-left: 28px;
}
.book_brief_introduction{
    width: 695px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    overflow-y: auto;
}
.buy_book_box{
    width: 300px;
    height: 60px;
    margin-top: 60px;
    margin-left: 425px;
    display: flex;
    justify-content: space-between;
}
.btn{
    width: 140px;
    height: 50px;
    font-size: 16px;
}
</style>

